<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/3/22 0022
  Time: 上午 11:02
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>

    <![endif]-->
<style>
    .img-responsive1{
        width: 100%;

    }
    #sss{
        float: right;
        margin: 5px;
    }
    #gg{
        float: right;
        margin: 5px;
    }
    #tj{
        float: right;
        margin: 5px;
    }

    #s{
        background-color:darkred;
        color: white;
    }
    .pagination{
        margin-left: 50px;
    }
    .ss{
        height: 24px;
        width: 70px;
    }
    .aa{
        margin-left: 850px;
        margin-top: -30px;

    }

</style>
</head>
<body>

<!--第一行-->
<div class="row paddtop">
    <img src="images/top_banner.jpg" class="img-responsive1" >
</div>
<div class="row">
    <div class="col-md-3">

    </div>
    <div class="col-md-6">

    </div>
    <div class="col-md-3">
        <span>点击切换</span>
        <td> <a  href="/UpdateServlet?id=${user.id}" type="button"  class="btn btn-success" >修改密码<span class="glyphicon glyphicon-pencil"></span></a>
        <a href="/FindServlet" class="btn btn-default"><span class="glyphicon glyphicon-refresh"></span>刷新</a>
    </div>
</div>

<br>
当前用户：${sessionScope.ser1.role}
<a href="/LoginOutServlet">退出</a>
<div class="container">
<div>
    <center><h2>用户列表</h2></center>
    <br>
    <br>
    <br>
    <form action="/FindServlet" method="post">
    <div class="row">
        <div class="col-lg-3">
            <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">ID</button>
      </span>
                <input type="text" class="form-control"  name="id" value="${requestScope.parameterMap}"  placeholder="请输入id" >
            </div>
        </div>
        <div class="col-lg-3">
            <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">电话</button>
      </span>
                <input type="text" class="form-control"  name="phone" value="${requestScope.parameterMap}" placeholder="请输入电话">

            </div>
        </div>
        <div>
            <button class="bu" type="submit">搜索</button>
        </div>
    </div>
    </form>
<div>
    <button type="button" id="sss" onclick="ff()" class="btn btn-danger"><span class="glyphicon glyphicon-trash"></span>删除选中</button>
    <button type="button" id="gg" onclick="ffl()" class="btn btn-danger">反选<span class="glyphicon glyphicon-ok"></span></button>
    <a type="button" id="tj" class="btn btn-primary" href="add.jsp"><span class="glyphicon glyphicon-plus"></span>添加用户</a>
</div>
    <form id="xu" method="get" action="BatchDeleteServlet">
    <table class="table table-hover">
        <tr class="success">

        <tr>
        <label  style ="display: block" padding="10px">
            <th><input type="checkbox" id="ss" onclick="selectAll()" ></th>
        </label>

            <td>编号</td>
            <td>电话</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>性别</td>
            <td>进行操作</td>

        </tr>

        <c:forEach items="${requestScope.pageBean.getList()}" var="user">
            <tr>
                <label style ="display: block" padding="10px">
                    <td><input type="checkbox" name="checkbox" id="selects" value="${user.id}"></td>
                </label>

                <td>${user.id}</td>
                <td>${user.phone}</td>
                <td>${user.name}</td>
                <td>${user.age}</td>
                <td>${user.sex}</td>
                <td> <a  href="/UpdateServlet?id=${user.id}" type="button"  class="btn btn-success" >修改<span class="glyphicon glyphicon-pencil"></span></a>
                    <a  href="/DeleteServlet?id=${user.id}" onclick="return confirm('你确定要删除这条数据吗？')"><button id="s" class="btn btn-danger" type="button">删除<span class="glyphicon glyphicon-trash"></span></button></a> </td>

            </tr>
        </c:forEach>
    </table>
    <nav aria-label="Page navigation">
        <ul class="pagination pagination-lg">
            <li>
            <li><a href="#">当前页${requestScope.pageBean.getPageNum()}/${requestScope.pageBean.getTotalPages()}</a></li>
            </li>
            <li>
            <li><a href="javascript:void(0)" onclick="go(1)">首页</a></li>
            </li>
            <li>
                <a href="javascript:void(0)"  onclick="go(${requestScope.pageBean.getBeforePage()})" aria-label="Previous" >
                    <span aria-hidden="true">上一页</span>
                </a>
            </li>
           <c:forEach items="${requestScope.pageBean.getPageBar()}" var="bar">
           <c:if test="${requestScope.pageBean.getPageNum()==bar}">
               <li class="active"><a href="#">${bar}</a></li>
           </c:if>
               <c:if test="${requestScope.pageBean.getPageNum()!=bar}">
                   <li><a href="javascript:void(0)" onclick="go(${bar})">${bar}</a></li>
               </c:if>
           </c:forEach>
            <li>
                <a href="javascript:void(0)"  onclick="go(${requestScope.pageBean.getNextPage()})" aria-label="Next">
                    <span aria-hidden="true">下一页</span>
                </a>

            </li>
            <li>
            <li><a href="javascript:void(0)"  onclick="go(${requestScope.pageBean.getTotalPages()})">尾页</a></li>
            </li>
            <li>
            <li><a href="#">共有${requestScope.pageBean.getTotalCounts()}条</a></li>
            </li>
            <li>

        </ul>
    </nav>
    </form>
</div>
</div>

<form action="/FindServlet">
    <div class="aa">
    <input type="text" class="ss" name="pageNum" >
    <button type="submit"  >跳转</button>
    </div>
</form>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="bootstrap/js/jquery-3.3.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
</body>
<script>
       function ff() {
            //获取复选的、
       var x= document.getElementsByName("checkbox")
           var sr= "";
       for (var i=0 ;i<x.length;i++){
           if (x[i].checked==true){
               sr += x[i].value+" "
           }

       }
       if (sr==""){
           alert("请选择要删除的内容")
       }else {
         var tu=window.confirm("您要删除的内容编号为"+ sr)
           if (tu){
               document.getElementById("xu").submit()
           }
       }

    }


</script>
<script>
    function go(PageNum) {
        location.href="FindServlet?pageNum="+PageNum;
    }
</script>
<script>
    function selectAll() {
        var bt = document.getElementById("ss")
        var cn = document.getElementsByName("checkbox")
        if (bt.checked == false) {
            for (var i = 0; i < cn.length; i++) {
                cn[i].checked =false;
            }
        }else if (bt.checked == true) {
            for (var i = 0; i < cn.length; i++) {
                cn[i].checked =true;
            }

        }
    }
</script>
<script>
    function ffl() {
        var ched =document.getElementsByName("checkbox")
        for (var i = 0; i < ched.length; i++) {
            ched[i].checked=!ched[i].checked;
        }
    }
</script>

</html>





